<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>info</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
</head>
<body class="container">
<br/>
<h1>用户体检列表</h1>
<br/>
<div class="form-group">
    <div class="col-md-4 col-sm-4 col-xs-4">
        <div class="input-group">
            <input id="userId" class="form-control" type="hidden" name="userId" th:value="${userId}"/>
        </div>
    </div>
</div>
<div class="with:80%">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>体检单号</th>
            <th>体检时间</th>
            <th>修改时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
    <hr/>
    <div class="row clearfix">
        <div class="col-md-3 col-sm-3 col-xs-3">
            共<label id="total_count" style="color:#080808" >0</label>条记录,当前<label id="current_page" style="color:#080808">1</label>页。
        </div>
        <div class="col-md-9 col-sm-9 col-xs-9" align="right">
            <ul id="page" style="margin: 0 0">
            </ul>
        </div>
    </div>
</div>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script th:src="@{/js/bootstrap-paginator.min.js}" type="text/javascript"></script>
<script th:inline="javascript">
    var peItems = [[${peItems}]];
    var i = [[${i}]];
    $(function () {
        $("#total_count").html(peItems.totalElements);
        $("#current_page").html(Number(peItems.number) + Number(1) +"/" + peItems.totalPages);

        if(peItems.totalPages!=0){
            $('#page').bootstrapPaginator({
                currentPage: Number(peItems.number) + Number(1),//当前的请求页面。
                bootstrapMajorVersion: 3,//bootstrap的版本要求。
                totalPages: peItems.totalPages//一共多少页。
            });
        }
        $("#tbody").html(format_data(peItems.content));
    });

    $('#page').bootstrapPaginator({
        currentPage: 1,//当前的请求页面。
        totalPages: 1,//一共多少页。
        size: "normal",//页眉的大小。
        bootstrapMajorVersion: 3,//bootstrap的版本要求。
        alignment: "right",
        numberOfPages: 10,//一页列出多少数据。
        itemTexts: function (type, page, current) {//如下的代码是将页眉显示的中文显示我们自定义的中文。
            switch (type) {
                case "first":

                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "末页";
                case "page":
                    return page;
            }
        },
        onPageClicked: function (event, originalEvent, type, page) {
            load_data(page - 1);
        }
    });



    function load_data(page){
        $.ajax({
            url: [[@{/pe/peUserManage/peItemsList/}]]+page,
            type: 'post',
            data: JSON.stringify({
            "userId" : $("#userId").val()
        }),
            traditional:true,
            dataType: 'JSON',
            contentType: "application/json; charset=utf-8",
            error:function(e){
            console.log(e);
        },
        success: function(data) {
            $("#total_count").html(data.totalElements);
            $("#current_page").html(Number(data.number) + Number(1) +"/" + data.totalPages);
            if(data.totalPages!=0){
                $('#page').bootstrapPaginator({
                    currentPage: Number(data.number) + Number(1),//当前的请求页面。
                    bootstrapMajorVersion: 3,//bootstrap的版本要求。
                    totalPages: data.totalPages//一共多少页。
                });
            }

            $("#tbody").html(format_data(data.content));
        }
    });
    }
    function format_data(data){
        var str="";

        $.each(data ,function (id,peItems) {
            str +="<tr>"+
                "<td>"+peItems.peId+"</td>"+
                "<td>"+peItems.createDate+"</td>";
            if (null==peItems.updateDate){
                str += "<td>"+"无修改"+"</td>";
            }else {
                str += "<td>"+peItems.updateDate+"</td>";
            }



            if (i==1){
                str += "<td><a href='"+[[@{/pe/peUserManage/toQueryPeItems?id=}]]+peItems.id+"' >查看</a></td>"+"</tr>";
            }
            if (i==2){
                str += "<td><a href='"+[[@{/pe/peUserManage/toEditPeItems?id=}]]+peItems.id+"' >编辑</a></td>"+"</tr>";
            }
            if (i==3){
                str += "<td><a href='"+[[@{/pe/peUserManage/toDeletePeItems?id=}]]+peItems.id+" '>删除</a></td>"+"</tr>";
            }
        })
        return str;
    }
    function str() {
    }
</script>
</html>